<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head> 
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>动态管理</title>
	<!-- 常规css -->
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <!-- 项目css -->
    <link th:href="@{css/layout.css}" rel="stylesheet" />
</head> 
<body th:with="asort=${#httpServletRequest.getParameter('sort')}, aorder=${#httpServletRequest.getParameter('order')}, num=${data.num}, pageIndex=${data.pageIndex}">
	<!-- 侧边导航栏 -->
	<div th:replace="aframe::sideNavigation"></div>
	
	<!-- 主页面 -->
	<div class="content" style="padding:0">
		<!-- 顶部导航栏 -->
		<div th:replace="aframe::topNavigation"></div>
		<!-- 内容 -->

		<!-- 标签页内容 -->
		<div role="tabpanel" class="tab-pane active" id="history" style="margin:20px">
			<div class="panel panel-default" >
				<div class="panel-heading">
					<h4>动态管理&nbsp;&nbsp;</h4>
				</div>
				<div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
						<tr>
							<th>编号</th>
							<th>用户昵称</th>
							<th>类型</th>
							<th>标题</th>
							<th>发布时间</th>
							<th>是否置顶</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<tr th:each="moment: ${data.list}">
							<th scope="row" th:text="${moment?.momentId}">momentId</th>
							<td th:text="${moment?.nickname}">用户昵称</td>
							<div th:switch="${moment?.momentType}">
								<td th:case="1">照片</td>
								<td th:case="2">视频</td>
							</div>
							<td th:text="${moment?.momentTitle}">标题</td>
							<td th:text="${#dates.format(moment?.momentTime, 'yyyy-MM-dd HH:mm')}">发布时间</td>
							<td th:text="${moment?.isTop eq 0} ? '否' : '是'"></td>
							<td>
								<button class="btn btn-sm btn-info" th:onclick="showDetail([[${moment?.momentId}]])">查看</button>
								<button class="btn btn-sm btn-info" th:onclick="showComment([[${moment?.momentId}]], null, null, null)">评论</button>
								<button class="btn btn-sm btn-success"  th:onclick="showTop([[${moment?.momentId}]])">切换置顶</button>
								<button class="btn btn-sm btn-danger"  th:onclick="showDelete([[${moment?.momentId}]])">删除</button>
							</td>
						</tr>
						</tbody>
					</table>

					<!-- 分页 -->
					<div th:replace="aframe::pagingBar"></div>

				</div>
			</div>
		</div>
	</div>
		<!-- end 内容 -->
	<!-- end 主页面 -->

	<!-- 模态框: 信息 -->
	<form class="form-horizontal" role="form" id="detailForm" style="margin: 20px;">
		<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="detailModalLabel"> 动态详情 </h4>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">标题</label>
							<div class="col-sm-7">
								<p class="form-control-static" id="momentTitle"></p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">内容</label>
							<div class="col-sm-7">
								<p class="form-control-static" id="momentText"></p>
							</div>
						</div>
						<div class="form-group" id="div_picture">
							<label class="col-sm-3 control-label">图片</label>
							<div class="col-sm-7">
								<img class="form-control-static" id="pictureUrl" style="height: 400px; max-height: 400px; max-width: 500px">
							</div>
						</div>
						<div class="form-group" id="div_vedio">
							<label class="col-sm-3 control-label">视频</label>
							<div class="col-sm-7">
								<video id="vedioUrl" style="height: 400px; max-height: 400px; max-width: 500px" autoplay>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>


	<!-- 模态框: 评论 -->
	<form class="form-horizontal" role="form" id="commentForm" style="margin: 20px;">
		<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="commentModalLabel"> 动态评论 </h4>
					</div>
					<div class="modal-body">
						<table class="table table-hover" style="table-layout:fixed">
							<thead>
							<tr>
								<th width="10%">编号</th>
								<th width="10%">用户ID</th>
								<th width="20%">昵称</th>
								<th width="30%">内容</th>
								<th width="20%">时间</th>
								<th width="10%">操作</th>
							</tr>
							</thead>
							<tbody id="comment-table">
							<!--表格内容-->
							</tbody>
						</table>
						<!--分页-->
						<nav aria-label="Page navigation">
							<ul class="pagination" id="comment-nav">
								<!-- 上一页 -->
								<li>
									<a th:href="@{${#httpServletRequest.requestURL}(sort=${asort},order=${aorder},pageIndex=${data.pageIndex}-1,num=${data.num},totalPages=${data.totalPages})}" aria-label="Previous" th:if="${1 ne data.pageIndex}">
										<span aria-hidden="true">上一页</span>
									</a>
									<a href="#" th:if="${1 eq data.pageIndex}" style="color: #888888;pointer-events: none;">
										<span aria-hidden="true">上一页</span>
									</a>
								</li>
								<!-- 中间页 -->
								<li th:each="pageIdx:${#numbers.sequence(1, data.totalPages)}">
									<a th:href="@{${#httpServletRequest.requestURL}(sort=${asort},order=${aorder},pageIndex=${pageIdx},num=${data.num},totalPages=${data.totalPages})}" th:text="${pageIdx}" th:if="${pageIdx ne data.pageIndex}"></a>
									<a href="#" th:text="${pageIdx}" th:if="${pageIdx eq data.pageIndex}" th:style="'font-weight:bold;background: #6faed9;pointer-events: none;'"></a>
								</li>
								<!-- 下一页 -->
								<li>
									<a th:href="@{${#httpServletRequest.requestURL}(sort=${asort},order=${aorder},pageIndex=${data.pageIndex}+1,num=${data.num},totalPages=${data.totalPages})}" aria-label="Next" th:if="${data.totalPages ne data.pageIndex}">
										<span aria-hidden="true">下一页</span>
									</a>
									<a href="#" th:if="${data.totalPages eq data.pageIndex}" style="color: #888888;pointer-events: none;">
										<span aria-hidden="true">下一页</span>
									</a>
								</li>
							</ul>
						</nav>


					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>

	<!-- 模态框: 修改密码 -->
	<div th:replace="aframe::modifyPwd"></div>


<!-- 常规js -->
<script th:src="@{js/jquery-3.4.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<!-- 模板js -->
<script th:replace="aframe::js-highlight"></script>
<!-- 项目js -->
<script th:src="@{js/md5.js}"></script>
<script th:src="@{js/setpwd.js}"></script>
<!-- 页面js -->
<script th:src="@{js/moment.js}"></script>


</body>
</html> 

